<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box1{
        width: 400px;
        margin: 100px 100px;
        position: relative;
    }
    .box1 img{
        width: 400px;
        position: absolute;
    }
    .box1 button{
        border: none;
        color: white;
        font-size: 16px;
        position: absolute;
        cursor: pointer;
        outline: none;
        z-index: 10;
        background: none;
    }
    .box2 {
        margin: 100px 600px;
    }
    li{
        cursor: pointer;
        list-style: none;
    }
    .nav ul {
        display: none;
    }
</style>
<body>
<input type="text" value="用户名" id="inp1">
<div class="box1">
    <button id="btn1">关闭</button>
    <img src="../images/img1.jpg" alt="" id="img1">
</div>
<div class="box2">
    <ul class="nav">
        <li>
            <a>下拉</a>
            <ul>
                <li><a>下拉1</a></li>
                <li><a>下拉2</a></li>
                <li><a>下拉3</a></li>
            </ul>
        </li>
    </ul>
</div>
<script>
    var inp1 = document.getElementById('inp1');
    inp1.onfocus = function () {
        if (this.value === '用户名') {
            this.value = '';
        }
        this.style.color = '#333';
        this.style.outline = 'pink';
    };
    inp1.onblur = function () {
        if (this.value === '') {
            this.value = '用户名';
        }
        this.style.color = '#999';
        this.style.outline = 'black';
    };

    var btn1 = document.getElementById('btn1');
    var img1 = document.getElementById('img1');
    btn1.onclick = function () {
            img1.style.display = 'none';
    };
    var nav = document.querySelector('.nav');
    var lis = nav.children;
    for (var i = 0;i < lis.length;i++){
        lis[i].onmouseover = function () {
            this.children[1].style.display = 'block';
        };
        lis[i].onmouseout = function () {
            this.children[1].style.display = 'none';
        }
    }
</script>
</body>
</html>